<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Primitive Template</title>

    <link rel="stylesheet" href="css/main.css" />
    <link rel="icon" href="images/favicon.png" />

    <style>
      nav {
        background: #343434;
        height: 80px;
      }

      nav a {
        padding: 10px;
        line-height: 80px;
        color: #ccc;
        font-size: 1rem;
      }

      nav a:hover,
      nav a:active,
      nav a:focus {
        color: white;
        text-decoration: none;
      }

      @media screen and (min-width: 600px) {
        nav a {
          padding: 20px;
        }
      }

      header h1 {
        font-size: 4rem;
      }

      .brand {
        font-size: 1.2rem;
      }
    </style>
  </head>

  <body>
    <nav>
      <div class="container flex-row space-between">
        <div>
          <a href="#!" class="brand">Brand</a>
        </div>
        <div>
          <a href="#!">Support</a>
          <a href="#!">Learn</a>
          <a href="#!">Blog</a>
        </div>
      </div>
    </nav>

    <header class="text-center content-section alternate-background">
      <div class="small-container">
        <h1>Template</h1>
        <p>
          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
          laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
          architecto beatae vitae dicta sunt explicabo.
        </p>
        <a class="button muted-button">Download</a>
        <a class="button">Buy Now</a>
      </div>
    </header>

    <main>
      <section class="content-section no-padding-bottom">
        <div class="container text-center">
          <div class="row">
            <div class="small-33">
              <img src="https://placehold.it/350x250" class="responsive-image" />
              <h2>Sed ut perspiciatis</h2>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis vel harum qui
                nemo at eos adipisci, culpa totam id iste non, quaerat voluptatibus.
              </p>
            </div>
            <div class="small-33">
              <img src="https://placehold.it/350x250" class="responsive-image" />
              <h2>Culpa totam</h2>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis vel harum qui
                nemo at eos adipisci, culpa totam id iste non, quaerat voluptatibus.
              </p>
            </div>
            <div class="small-33">
              <img src="https://placehold.it/350x250" class="responsive-image" />
              <h2>Perfendis vel</h2>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis vel harum qui
                nemo at eos adipisci, culpa totam id iste non, quaerat voluptatibus.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section class="content-section">
        <div class="small-container">
          <h1 class="text-center">Regular Content</h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hos contra singulos dici est
            melius. Est, ut dicis, inquam. Si enim ad populum me vocas, eum. Primum in nostrane
            potestate est, quid meminerimus?
          </p>
          <h2>Preformatted</h2>
          <pre>
# This is a comment
class Person

  attr_accessor :name

  def initialize(attributes = {})
    @name = attributes[:name]
  end

  def self.greet
    "hello"
  end
end</pre
          >

          <h2>Unordered List</h2>
          <ul>
            <li>In qua quid est boni praeter summam voluptatem, et eam sempiternam?</li>
            <li>Dolor ergo, id est summum malum, metuetur semper, etiamsi non aderit;</li>
            <li>Hoc dixerit potius Ennius: Nimium boni est, cui nihil est mali.</li>
            <li>Ut in voluptate sit, qui epuletur, in dolore, qui torqueatur.</li>
            <li>Laboro autem non sine causa;</li>
          </ul>
          <div class="text-right">
            <a class="button accent-button">Accent Button</a>
          </div>
          <h2>Ordered List</h2>
          <ol>
            <li>Hoc loco tenere se Triarius non potuit.</li>
            <li>
              Semper enim ex eo, quod maximas partes continet latissimeque funditur, tota res
              appellatur.
            </li>
            <li>
              Non quaero, quid dicat, sed quid convenienter possit rationi et sententiae suae
              dicere.
            </li>
            <li>In eo enim positum est id, quod dicimus esse expetendum.</li>
            <li>
              Est autem etiam actio quaedam corporis, quae motus et status naturae congruentis
              tenet;
            </li>
          </ol>
          <h2>Definition List</h2>
          <dl>
            <dt><dfn>Quis hoc dicit?</dfn></dt>
            <dd>In his igitur partibus duabus nihil erat, quod Zeno commutare gestiret.</dd>
            <dt><dfn>Eam stabilem appellas.</dfn></dt>
            <dd>Nam, ut paulo ante docui, augendae voluptatis finis est doloris omnis amotio.</dd>
          </dl>
          <h2>Blockquote</h2>
          <blockquote cite="http://loripsum.net">
            Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe
            eveniet, ut et voluptates repudiandae sint et molestiae non recusandae.
          </blockquote>
          <p>
            At enim, qua in vita est aliquid mali, ea beata esse non potest.
            <i>Sed quot homines, tot sententiae;</i> Cur igitur easdem res, inquam, Peripateticis
            dicentibus verbum nullum est, quod non intellegatur? Nunc vides, quid faciat. Expectoque
            quid ad id, quod quaerebam, respondeas. Egone non intellego, quid sit don Graece, Latine
            voluptas? Non risu potius quam oratione eiciendum? Atqui reperies, inquit, in hoc quidem
            pertinacem;
          </p>

          <h2>Table</h2>
          <div class="contain-table">
            <table>
              <caption>
                Figure A
              </caption>
              <thead>
                <tr>
                  <th>Table Heading 1</th>
                  <th>Table Heading 2</th>
                  <th>Table Heading 3</th>
                </tr>
              </thead>
              <tfoot>
                <tr>
                  <th>Table Footer 1</th>
                  <th>Table Footer 2</th>
                  <th>Table Footer 3</th>
                </tr>
              </tfoot>
              <tbody>
                <tr>
                  <td>Table Cell 1</td>
                  <td>Table Cell 2</td>
                  <td>Table Cell 3</td>
                </tr>
                <tr>
                  <td>Table Cell 1</td>
                  <td>Table Cell 2</td>
                  <td>Table Cell 3</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </section>

      <section class="content-section alternate-background">
        <div class="small-container">
          <h1 class="text-center">Forms</h1>
          <p>
            Sint modo partes vitae beatae. Cur post Tarentum ad Archytam? Quod ea non occurrentia
            fingunt, vincunt Aristonem; Dempta enim aeternitate nihilo beatior Iuppiter quam
            Epicurus; <b>Qui est in parvis malis.</b> Modo etiam paulum ad dexteram de via
            declinavi, ut ad Pericli sepulcrum accederem.
          </p>
          <form>
            <label for="text">Text Input</label>
            <input id="text" type="text" placeholder="Text Input" />
            <label for="password">Password</label>
            <input id="password" type="password" placeholder="Password" />
            <label for="url">URL</label>
            <input id="url" type="url" placeholder="http://example.com" />
            <label for="email">Email Address</label>
            <input id="email" type="email" placeholder="you@example.com" />
            <label for="phone">Phone Number</label>
            <input id="phone" type="tel" placeholder="(999) 999-9999" />
            <label for="search">Search</label>
            <input id="search" type="search" placeholder="Search" />
            <label for="number">Number</label>
            <input id="number" type="number" placeholder="Enter a Number" />
            <label for="select">Select</label>
            <select id="select">
              <option>Option One</option>
              <option>Option Two</option>
              <option>Option Three</option>
            </select>
            <label for="checkbox1">
              <input id="checkbox1" name="checkbox" type="checkbox" checked="checked" /> Choice
              A</label
            >
            <label for="checkbox2">
              <input id="checkbox2" name="checkbox" type="checkbox" /> Choice B</label
            >
            <label for="radio1">
              <input id="radio1" name="radio" type="radio" class="radio" checked="checked" /> Option
              1</label
            >
            <label for="radio2">
              <input id="radio2" name="radio" type="radio" class="radio" /> Option 2</label
            >
            <label for="textarea">Textarea</label>
            <textarea
              id="textarea"
              rows="8"
              cols="48"
              placeholder="Enter your message here"
            ></textarea>
            <input type="button" class="accent-button" value="Something" />
            <input type="submit" value="Submit" />
          </form>
        </div>
      </section>

      <section class="content-section">
        <div class="medium-container">
          <h1 class="text-center">Grid</h1>
          <div class="row">
            <div class="small-50">
              <h2>Sed ut perspiciatis</h2>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis vel harum qui
                nemo at eos adipisci, culpa totam id iste non, quaerat voluptatibus. Commodi, illo
                omnis.
              </p>
            </div>
            <div class="small-50">
              <h2>Commodi illo</h2>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis vel harum qui
                nemo at eos adipisci, culpa totam id iste non, quaerat voluptatibus. Commodi, illo
                omnis.
              </p>
            </div>
            <div class="small-50">
              <h2>Culpa totam</h2>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis vel harum qui
                nemo at eos adipisci, culpa totam id iste non, quaerat voluptatibus. Commodi, illo
                omnis.
              </p>
            </div>
            <div class="small-50">
              <h2>Perfendis vel</h2>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis vel harum qui
                nemo at eos adipisci, culpa totam id iste non, quaerat voluptatibus. Commodi, illo
                omnis.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section class="content-section alternate-background">
        <div class="container">
          <div class="row">
            <div class="small-33">
              <h3>Dolor sit amet</h3>
              <form>
                <label for="email">Your Email Address</label>
                <input type="text" />
                <input type="submit" />
              </form>
            </div>
            <div class="small-66">
              <h3>Lorem Ipsum</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. In optio repellendus rerum
                laudantium perferendis explicabo quam asperiores hic quas necessitatibus illum rem,
                ab, eos, fuga laboriosam porro eius ducimus vel.
              </p>
            </div>
          </div>
        </div>
      </section>
    </main>

    <footer class="content-section">
      <div class="container">
        <div class="row">
          <div class="small-25">
            <h3>Quos autem vel</h3>
            <ul class="clean-list">
              <li><a href="#!">Aliquam</a></li>
              <li><a href="#!">Morbi</a></li>
              <li><a href="#!">Praesent</a></li>
              <li><a href="#!">Pellentesque</a></li>
            </ul>
          </div>
          <div class="small-25">
            <h3>Autem Pallentesque</h3>
            <ul class="clean-list">
              <li><a href="#!">Aliquam</a></li>
              <li><a href="#!">Morbi</a></li>
              <li><a href="#!">Praesent</a></li>
              <li><a href="#!">Pellentesque</a></li>
            </ul>
          </div>
          <div class="small-25">
            <h3>Ipsum Lorem</h3>
            <ul class="clean-list">
              <li><a href="#!">Aliquam</a></li>
              <li><a href="#!">Morbi</a></li>
              <li><a href="#!">Praesent</a></li>
              <li><a href="#!">Pellentesque</a></li>
            </ul>
          </div>
          <div class="small-25">
            <h3>Consectetur</h3>
            <ul class="clean-list">
              <li><a href="#!">Aliquam</a></li>
              <li><a href="#!">Morbi</a></li>
              <li><a href="#!">Praesent</a></li>
              <li><a href="#!">Pellentesque</a></li>
            </ul>
          </div>
        </div>
      </div>
    </footer>

    <div class="small-container text-center padding-top padding-bottom">
      <a href="https://taniarascia.github.io/primitive/">Primitive</a>
    </div>
  </body>
</html>
